<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            background: red;
            width:200px;
            height:200px;
            position:absolute;
            top:0;
            left:0;
        }
        .bor{
            width:180px;
            height:180px;
            border:10px dotted green;
            position: absolute;
            top:0;
            left:0;
        }
    </style>
    <script>
        class Drag{
            constructor(){
               this.oDiv=document.querySelector('div');
            }
            show(){
                var div=this.oDiv;
                var x=0;
                var y=0;
                div.onmousedown=function(ev){
                //创建一个div
                var obor=document.createElement('p');
                obor.className='bor';
                obor.style.left=x+'px';
                obor.style.top=y+'px';
                document.body.appendChild(obor);
                var ev=ev||event;
                //鼠标距oDiv的距离
                var disX=ev.clientX-div.offsetLeft;
                var disY=ev.clientY-div.offsetTop;
                document.onmousemove=function(ev){
                    var ev=ev||event;
                    //oDiv距浏览器边缘的距离
                    x=ev.clientX-disX;
                    y=ev.clientY-disY;

                    obor.style.left=x+'px';
                    obor.style.top=y+'px';
                };
                document.onmouseup=function(){
                    div.style.left=x+'px';
                    div.style.top=y+'px';
                    document.body.removeChild(obor);
                    document.onmouseup=null;
                    document.onmousemove=null;
                };
                return false;
            };
            }
        }

        window.onload=function(){
            var drag=new Drag();
            drag.show();
        };
    </script>
</head>

<body>
<div></div>
</body>
</html>